<div class="artalk-comment-wrap" data-comment-id="<%= data.id %>">
  <div class="artalk-comment">
    <div class="artalk-avatar">
      <a target="_blank" <% if(!!data.link){ %>href="<%= data.link %>"<% } %>>
        <img src="<%= getGravatarUrl() %>">
      </a>
    </div>
    <div class="artalk-comment-main">
      <div class="artalk-header">
        <span class="artalk-nick">
          <a target="_blank" <% if(!!data.link){ %>href="<%= data.link %>"<% } %>><%= data.nick %></a>
        </span>
        <% if (!!data.badge) { %>
        <span class="artalk-badge" <% if(!!data.badge.color){ %>style="background-color: <%= data.badge.color %>"<% } %>>
          <%= data.badge.name || '管理员' %>
        </span>
        <% } %>
        <span class="artalk-date"><%= getDateFormatted() %></span>
        <span class="artalk-ua"><%= getUserUaBrowser() %></span>
        <span class="artalk-ua"><%= getUserUaOS() %></span>
      </div>
      <div class="artalk-body">
        <div class="artalk-content<%= !!data.is_collapsed ? ' artalk-hide artalk-type-collapsed' : '' %>"><%- getContentMarked() %></div>
        <% if(!!data.is_collapsed) { %>
        <div class="artalk-collapsed">
          <span class="artalk-text">该评论已被系统或管理员折叠</span>
          <span class="artalk-show-btn">查看内容</span>
        </div>
        <% } %>
      </div>
      <div class="artalk-footer">
        <div class="artalk-comment-actions">
          <% if(data.is_allow_reply !== false) { %><span data-comment-action="reply">回复</span><% } %>
          <span data-comment-action="collapse" class="artalk-hide" data-list-ui-only-admin>
            <%= !!data.is_collapsed ? '取消折叠' : '折叠' %>
          </span>
          <span data-comment-action="delete" class="artalk-hide" data-list-ui-only-admin>删除</span>
        </div>
      </div>
    </div>
  </div>
</div>
